<template>
    <Echart
     :options="options"
     :id="id"
     height="3rem"
     width="2.8rem"
    >
  </Echart>
</template>

<script>
import Echart from '@/common/echart'
import {nowSize} from '@/utils'
export default {
  name: 'chart',
  components:{
      Echart
  },
  data() {
      return {
         options:{} 
      }
  },
  computed:{
  
  },
  props:{
      cdata:{
        type: Object,
       default: () => ({}),
      },
      id:String
  },
  watch:{
      cdata:{
         handler(newData){
         let radius = [0, '45%']
     	 let radius1 = ['47%', '55%'];
	     let radius2 = ['59%', '61%'];
  	     let radius3 = ['61.5%', '63.5%'];
	     let radius4 = ['64%', '67%'];

	     let value = newData.good;
         this.options = {
            
            title: [{
                text: value + '%',
                x: 'center',
                top: '52%',
                textStyle: {
                    color: '#ffffff',
                    fontSize: nowSize(19),
                },
                z:100
            }, {
                text: '良品率',
                x: 'center',
                top: '42%',
                textStyle: {
                    fontSize: nowSize(19),
                    color: '#fdf914',
                },
                z:100
            },
            {
                text:  newData.station_name,
                x: 'center',
                bottom: '0%',
                textStyle: {
                    fontSize: nowSize(19),
                    color: '#bde4ff',
                },
                z:100
            },
             {
                text: `产能：${newData.total}`,
                x: 'center',
                top: '0%',
                textStyle: {
                    fontSize: nowSize(19),
                    color: '#bde4ff',
                },
                z:100
            }
            ],
            polar: {
                radius: radius1,
                center: ['50%', '50%'],
            },
            angleAxis: {
                max: 100,
                show: false,
            },
            radiusAxis: {
                type: 'category',
                show: true,
                axisLabel: {
                    show: false,
                },
                axisLine: {
                    show: false,

                },
                axisTick: {
                    show: false
                },
            },
            series: [
                {
                    name: '',
                    type: 'bar',
                    roundCap: true,
                    barWidth: 60,
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(0, 0, 0,1)',
                    },
                    data: [value],
                    coordinateSystem: 'polar',

                    itemStyle: {
                        normal: {
                            color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: '#00FFC0'
                            }, {
                                offset: 1,
                                color: '#136AED'
                            }])
                                                 
                        }
                    }

                }, 
                {
                    name: '',
                    type: 'pie',
                    startAngle: 90,
                    radius: radius2,
                    hoverAnimation: false,
                    center: ['50%', '50%'],
                    itemStyle: {
                        normal: {
                            labelLine: {
                                show: false
                            },
                            color: 'rgba(34,72,162, .5)',
                            shadowBlur: 100,
                            shadowColor: 'rgba(34,72,162, 1)',
                            
                        }
                    },
                    data: [{
                        value: 100,

                    }]
                },
                {
                    name: '',
                    type: 'pie',
                    startAngle: 90,
                    radius: radius3,
                    hoverAnimation: false,
                    center: ['50%', '50%'],
                    itemStyle: {
                        normal: {
                            labelLine: {
                                show: false
                            },
                            color: 'rgba(34,72,162, .7)',
                            shadowBlur: 100,
                            shadowColor: 'rgba(34,72,162, 1)',
                        }
                    },
                    data: [{
                        value: 100,

                    }]
                },
                {
                    name: '',
                    type: 'pie',
                    startAngle: 90,
                    radius: radius4,
                    hoverAnimation: false,
                    center: ['50%', '50%'],
                    itemStyle: {
                        normal: {
                            labelLine: {
                                show: false
                            },
                            color: 'rgba(34,72,162, 0.9)',
                            shadowBlur: 300,
                            shadowColor: 'rgba(100,143,244, 0.5)',
                        }
                    },
                    data: [{
                        value: 100,

                    }]
                },
                {
                    type: 'pie',
                    hoverAnimation: false,
                    legendHoverLink: false,
                    radius: radius,
                    z: 10,
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    // 模拟中间文字
                    label: {
                        show: false,
                    },
                    silent: true,
                    data: [{
                        value: 0,
                        itemStyle: {
                            color: {
                                type: 'radial',
                                x: 0.5,
                                y: 0.5,
                                r: 0.5,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(2, 11, 30, 1)' // 0% 处的颜色
                                }, {
                                    offset: .9,
                                    color: 'rgba(2, 11, 30, 1)' // 50% 处的颜色
                                }, {
                                    offset: 1,
                                    color: 'rgba(19, 106, 237, 0.3)' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        }
                    }]
                },
            
                ]
            };

        },
        immediate:true,
        deep:true
      }
   },
   methods:{ 
   }
 }
</script>

<style lang = "scss" scoped>

</style>
